<template>
<!--多图上传改造成功-->
  <div class="uploader">
    <div class="imgitem" v-for="(src,index) in images" :key="index">
      <!--<show-img :fileId="fileId"/>-->
      <img :src="baseUrl+src" style="max-width:100%;max-height:100%;" />
      <div class="close" @click="del(index)">+</div>
    </div>
    <div class="op" @click="uploader" >
      +
      <input
        ref="uploaderInput"
        :accept="accept"
        type="file"
        @change="inputChange($event)"
      />
    </div>
  </div>
</template>

<script>
import uploadMixin from "@/mixin/upload";
import store from '@/store'

export default {
  mixins: [uploadMixin],
  props:{
    accept: {
      type: String,
      default: "image/*"
    },
    value:{
      type:Array,
      default:()=>[]
    }
  },
  watch:{
    value:{
      handler:function(newVal){
        this.images = newVal
      },
      immediate:true
    }
  },
  data() {
    return {
      images:[],
      baseUrl:store.getters.domain,
    };
  },
  methods:{
    uploader(){
      this.$refs.uploaderInput.click()
    },
    del(index){
      this.images.splice(index,1)
      this.$emit("input",this.images)
    },
    uploadSuccess(res){      
      this.images.push(res.data)      
      this.$emit("input",this.images)
    }
  }
};
</script>

<style scoped>
.uploader {
  border: 1px solid #fff;
  display: flex;
  flex-wrap:wrap;
}
.uploader .imgitem {
  border: 1px solid #eee;
  border-radius:6rpx;
  overflow:hidden;
  width: 100px;
  height: 100px;
  overflow: hidden;
  margin-right: 10px;
  margin-bottom:10px;
  position:relative;
  text-align:center;
}
.uploader .imgitem .close{
  position:absolute;
  right:0;
  top:0;
  background:rgba(0,0,0,.3);
  color:white;
  width:20px;
  height:20px;
  display:flex;
  justify-content:center;
  align-items:center;
  border-radius:100%;
  transform:rotate(45deg);
  cursor:pointer;
}
.uploader .op {
  border: 1px solid #eee;
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  cursor: pointer;
}
.uploader .op input{
  display:none;
}
</style>
